<template>
  <div id="app">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input type="text" :value="inputValue" placeholder="请输入关键词" @input="handelSelInputVal" clearable></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handelAddItemList">添加事物项</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="13" style="border:1px solid #eee;margin-top:20px;margin-left:10px">
          <div class="list_wrap">
            <div v-show="infosList.length > 0" class="list_item" v-for="item in infosList" :key="item.id">
              <el-checkbox v-model="item.done" style="margin:0 5px;width:20%" @change="(e) =>{handelcbStateChange(e,item.id)}"></el-checkbox>
              <p style="width:60%">{{item.info}}</p>
              <el-button size="mini" style="margin:0 10px;width:20%" @click="handelRemoveById(item.id)">删除</el-button>
            </div>
            <div v-show="infosList.length == 0" style="display:flex;justify-content: center;
  align-items: center;border-bottom:1px solid #eee;line-height:30px">no something</div>
            <div style="margin:10px 0">
              <span>未完成{{unDoneLength}}条记录</span>
              <el-button-group style="margin:0 5px">
                <el-button size="mini" :type="keyVal === 'all' ? 'primary' : 'default'"  @click="handelChangeList('all')">全部</el-button>
                <el-button size="mini" :type="keyVal === 'unDone' ? 'primary' : 'default'" @click="handelChangeList('unDone')">未完成</el-button>
                <el-button size="mini" :type="keyVal === 'done' ? 'primary' : 'default'" @click="handelChangeList('done')">已完成</el-button>
              </el-button-group>
              <el-link type="primary" style="margin:0 5px" @click="handeClearDone">清除已完成</el-link>
            </div>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'app',
  components: {

  },
  data () {
    return {

    }
  },
  created () {
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(['inputValue', 'keyVal']),
    ...mapGetters(['unDoneLength', 'infosList'])
  },
  methods: {
    handelSelInputVal (e) {
      this.$store.commit('SelInputVal', e)
      console.log(e)
    },
    handelAddItemList () {
      this.$store.commit('addItem')
    },
    // 删除列表项
    handelRemoveById (id) {
      this.$store.commit('removeById', id)
    },
    // 当状态改变的时候触发
    handelcbStateChange (e, id) {
      // console.log(e)
      // console.log(id)
      const param = {
        id: id,
        status: e
      }
      this.$store.commit('changeStatus', param)
    },
    // 清除已完成的任务
    handeClearDone () {
      this.$store.commit('clearDone')
    },
    // 显示 不同list
    handelChangeList (key) {
      // console.log(key)
      this.$store.commit('showList', key)
    }
  }
}
</script>

<style>
el-dd,el-dt{
  padding: 0;
  margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
.list_wrap{
  margin: 5px;
  width: 100%;
}
.list_item{
  display: flex;
  line-height: 20px;
  border-bottom: 1px solid #eee;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
}
</style>
